<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>类与样式的绑定</title>
        <style>
            .active {
                background: green;
                font-size: 30px;
            }
            .text-danger{
                font-size: 15px;
                color: yellow;
                background: darkgray;
            }
        </style>
        <!--第一步：安装Vue.js-->
        <script src="./vue.js"></script>
    </head>
    <body>
        <!--第三步：创建HTML模板（根组件）-->
       <div id="app">
        <!--1、绑定HTML class-->
         <div class="aa" :class="{active: isActive}">
            1.绑定对象 :class="{active: isActive}"
         </div>
         <div :class="classObj">
            2.绑定对象 :class="classObj",classObj:{active: true, 'text-danger': false}
         </div>
         <div :class="[textClass, activeClass]" >
            3.绑定数组 :class="[textClass, activeClass]"
         </div>
         <!--2、绑定HTML style-->
         <div :style="{color: activeColor, fontSize: fontSize}">
            1.绑定对象 :style="{color: activeColor, fontSize: fontSize}"
         </div>
         <div :style="{color: activeColor, 'font-size': fontSize + 'px'}">
            2.绑定对象 :style="{color: activeColor, 'font-size': fontSize + 'px'}"
         </div>
         <div :style="styleObj" >
            3.绑定对象 :style="styleObj"
         </div>
         <div :style="colorStyle, fontSizeStyle">
            4.绑定数组 :style="colorStyle, fontSizeStyle"
         </div>
         <div :style="styleArr">
            5.绑定数组 :style="styleArr" , styleArr: ['color: red', 'font-size': 30px]
         </div>
            6.样式多值:
            <div :style="{ display: ['-webkit-box', 'flex', '-ms-flexbox']}"></div>
       </div>

    </body>
    <script>
        
        //第二步：创建Vue的应用实例
        const app = Vue.createApp({
           data(){//定义所需的状态变量
              return{
                 isActive: 0,
                 classObj: {active: true, 'text-danger': false},
                 activeClass: 'active',
                 textClass: 'text-danger',
                 //2.绑定HTML style
                 activeColor: 'red',
                 fontSize: 20,
                 styleObj: {color: 'red', fontSize: '2rem'},
                 colorStyle:'color:red',
                 fontSizeStyle: 'font-size:30px',
                 styleArr: ['color:red', 'font-size: 30px']
           }
        }
        });
      //第四步：在根元素上挂载应用实例，返回根组件实例对象
      const vm = app.mount("#app");//const app = Vue.createApp({}).mount("#app");
    </script>
</html>